<template>
	<div class="subpage address" ref="name">
		<!-- <van-address-edit
			ref="address"
		  :address-info="addressInfo"
		  :area-list="areaList"
		  :show-delete="isShowDelete"
		  :search-result="searchResult"
		  @save="onSave"
		  @delete="onDelete"
		  :tel-validator="validator1"
		  @focus="focus"
		/>	 -->
		<van-cell-group>
			<van-field placeholder="收件人姓名" maxlength="10" label="姓名" v-model="addData.name" />
			<van-field type="tel" placeholder="收件人电话" maxlength="11" label="电话" v-model="addData.tel"/>
			<van-field placeholder="选择省/市/区" label="地区" readonly @click="showAreas" v-model="area" />
			<van-popup v-model="showArea" position="bottom">
				<van-area :area-list="areaList" :value="addData.areaCode" @confirm="confirmArea" @cancel="cancelArea" />
			</van-popup>
			<van-field label="详细地址" placeholder="街道门牌、楼层房间号等信息" v-model="addData.addressDetail" />
		</van-cell-group>
		<div class="clearfix" style="margin-top: 30px;">
			<van-button round class="u-btn-default bind-btn" @click="save">保存</van-button>
			<br>
			<van-button round class="u-btn-default bind-btn" v-if="isShowDelete" @click="onDelete">删除</van-button>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import areaList from '@/assets/js/Area.js'

	import {
		Card,
		button,
		Toast,
		AddressList,
		Popup,
		AddressEdit,
		Area,
		Dialog,
	} from 'vant'

	export default {
		components: {
			[button.name]: button,
			[AddressList.name]: AddressList,
			[Popup.name]: Popup,
			[AddressEdit.name]: AddressEdit,
			[Area.name]: Area,
			[Dialog.Component.name]: Dialog.Component
		},
		data() {
			return {
				area: '',
				showArea: false,
				isShowDelete: true,
				id: '',
				addressInfo: {},
				areaList,
				searchResult: [],
				addData: {
					name: '',
					tel: '',
					province: '',
					city: '',
					county: '',
					addressDetail: '',
					isDefault: 1,
					areaCode: ''
				}
			}
		},
		created() {
			this.id = this.$route.params.id;
			if (this.$route.query.item == undefined) {
				console.log('新增')
				this.isShowDelete = false; //  隐藏删除按钮
				return
			} else {
				this.isShowDelete = true; //  显示删除按钮
				let addressInfo = JSON.parse(this.$route.query.item);
				this.addData = addressInfo;
				this.area = `${this.addData.province} ${this.addData.city} ${this.addData.county}`
				console.log(this.addData)
			}

		},
		methods: {
			// 显示地区
			showAreas() {
				this.showArea = true;
			},
			// 确认地区
			confirmArea(value) {
				this.area = `${value[0].name} ${value[1].name} ${value[2].name}`
				this.addData.province = value[0].name;
				this.addData.city = value[1].name;
				this.addData.county = value[2].name;
				this.addData.areaCode = value[2].code;
				this.showArea = false;
			},
			// 隐藏地区
			cancelArea() {
				this.showArea = false;
			},
			// 保存
			save(){
				if(!this.$tool.validator.isEmpty(this.addData.name)){
					this.$tool.toast('请输入姓名')
					return;
				}
				if(!this.$tool.validator.isChinese(this.addData.name)){
					this.$tool.toast('请输入正确的姓名')
					return;
				}
				if(!this.$tool.validator.isEmpty(this.addData.tel)){
				  this.$tool.toast('请输入手机号')
				  return;
				}
				if(!this.$tool.validator.isMobilePhone(this.addData.tel)){ 
				  this.$tool.toast('请输入正确的手机号')
				  return; 
				}
				if(this.addData.province == ''){
					this.$tool.toast('请选择地区');
					return
				}
				if(this.addData.addressDetail == ''){
					this.$tool.toast('请输入详细地址')
					return
				}
				if(!this.$tool.validator.isSpecialText(this.addData.addressDetail)){
					this.$tool.toast('详细地址中不能包含特殊字符')
					return
				}
				
				// 新增
				if (this.addData.id == undefined) {
					this.$api.post('/api/user/addaddress', this.addData)
						.then((res) => {
							console.log(res)
							this.$router.back()
							// this.$router.push({
							// 	path: '/home/addresslist/' + this.id
							// })
						})
				
				} else {
					// 修改
					this.$api.post('/api/user/updateaddress', this.addData)
						.then((res) => {
							this.$router.back()
							// this.$router.push({
							// 	path: '/home/addresslist/' + this.id
							// })
						})
				}
			},
			// 删除地址
			onDelete() {
				Dialog.confirm({
				  message: '确定要删除么'
				}).then(() => {
					this.$api.post('/api/user/deladdress/' + this.addData.id)
						.then((res) => {
							console.log(res)
							this.$router.back()
							// this.$router.push({
							// 	path: '/home/addresslist/' + this.id
							// })
						})
				}).catch(() => {
					
				  // on cancel
				});
				
			}
		}
	}
</script>

<style>
	.van-button--danger {
		bottom: 0.32rem !important;
		width: 9.14667rem;
		height: 1.36rem;
		background: -webkit-linear-gradient(356deg, #31bc8d 0%, #a6e29b 100%) !important;
		background: linear-gradient(94deg, #31bc8d 0%, #a6e29b 100%) !important;
		border-radius: 0.69333rem;
		text-align: center;
		font-size: 0.48rem;
		border: none;
		left: 50%;
		margin-left: -4.53333rem;
		box-shadow: 0 0.16rem 0.26667rem #19884f66;
		color: #fff !important;
	}
	.address .van-cell__title span {
		position: relative;
		top: 3px;
	}
</style>
<style lang="scss" scoped>
	.van-address-edit {
		text-align: left;
	}

	.address {
		background-color: #fff;
	}
</style>
